<template>
  <div class="user-center">
    <div class="user-change">
        <UserChange/>
    </div>
    <div class="user-modify">
        <!-- <UserModifyInfo/> -->
        <!-- <UserInterest/> -->
        <!-- <UserModifyPassword/> -->
        <!-- <UserModifyPhone/> -->
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
import UserChange from './UserChange.vue'
import UserInterest from './UserInterest.vue'
import UserModifyInfo from './UserModifyInfo.vue'
import UserModifyPassword from './UserModifyPassword.vue'
import UserModifyPhone from './UserModifyPhone.vue'

export default {
  name: "UserCenter",
  components: {UserChange, UserModifyInfo, UserInterest, UserModifyPassword, UserModifyPhone}
}
</script>

<style scoped>
.user-center {
    margin-top: 30px;
    height: 534px;
    width: 683px;
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
}
.user-change {
    width: 25%;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.user-modify {
    width: 70%;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
}
</style>